<template>
  <div class="app-container banner_page">
    <div v-if="showEdit==1" style="padding: 10px;background: #fff;">
      <el-row style="background: #fff;margin-bottom: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
        <el-col :span="22">
          <el-input v-model="title" placeholder="标题搜索" clearable style="width: 120px;" />
          <el-select v-model="modeltypeid" placeholder="模型类型" clearable style="width: 120px;">
            <el-option
              v-for="(item,index) in modeloptions"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
          <el-select v-model="status" placeholder="商品状态" clearable style="width: 120px;">
            <el-option
              v-for="item in statusoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="seriesid" placeholder="关联系列" clearable style="width: 120px;">
            <el-option
              v-for="item in serieroptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
          <div style="padding-top: 10px;">
            <el-button type="primary" @click="getData(1)">搜索</el-button>
          </div>

        </el-col>

      </el-row>
      <el-row style="background: #fff;margin-bottom: 10px;">
        <el-col :span="22">
          <el-button type="primary" @click="showEditpage(null)">新增</el-button>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="opCommodityStatus(1)">上架</el-button>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="opCommodityStatus(2)">下架</el-button>
          <el-button type="" style="border-color: #409EFF;color: #409EFF;" @click="delCommodity">删除</el-button>
        </el-col>
        <el-col :span="2">
          <div class="total_bar">
            <span>共{{ count }}条</span>
          </div>
        </el-col>

      </el-row>
      <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @cell-click="godetail"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          prop="title"
          label="商品标题"
        />
        <el-table-column
          label="封面"
        >
          <template slot-scope="scope">
            <img class="tab_img" :src="scope.row.img" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            {{
              scope.row.status==0?'待上架':
              scope.row.status==1?'已上架':
              scope.row.status==2?'已下架':
              scope.row.status==3?'草稿':'其他'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="rmb"
          label="定价(元)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.money1 === scope.row.money2 ? scope.row.money1 : `${scope.row.money1}-${scope.row.money2}` }}
          </template>
        </el-table-column>
        <el-table-column
          prop="publishyear"
          label="出荷"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ getPublishString(scope.row.publishtype, scope.row.publishyear, scope.row.publishtime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="modeltypename"
          label="模型类型"
          show-overflow-tooltip
        />
        <el-table-column
          prop="shelftime"
          label="上架时间"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEditpage(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;justify-content: center;padding: 20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="20"
          :page-count="total"
          :total="count"
          @current-change="getData"
        />
      </div>

    </div>
    <div v-if="showEdit == 2">
      <edit :editdata="addData" class="edit" />
    </div>
    <div v-if="showEdit == 3">
      <success :editdata="addData" :addCommodityid="addCommodityid" />
    </div>
    <div v-if="showEdit == 4">
      <detail :editdata="addData" />
    </div>

  </div>
</template>

<script>
import mixin from '@/components/Mixins'
import { commodityIdx, getModelType, getSeriesList, opCommodityStatus, delCommodity } from '@/api/commodity'
import edit from './edit'
import success from './success'
import detail from './detail'
export default {
  mixins: [mixin],
  components: {
    edit, success, detail
  },
  data() {
    return {
      showEdit: 1, // 1主页 2编辑 3发布成功 4详情
      statusoptions: [
        { value: 0, label: '全部' },
        { value: 1, label: '已上架' },
        { value: 2, label: '已下架' },
        { value: 3, label: '草稿' },
        { value: 4, label: '待上架' }
      ],
      modeloptions: [],
      serieroptions: [],
      tableData: [],
      multipleSelection: [],

      title: '',
      modeltypeid: '',
      status: '',
      seriesid: '',

      total: 1,
      count: 1,
      addData: null,
      addCommodityid: ''
    }
  },
  watch: {
    '$route'(val) {
      console.log('val', val)
      this.switchEdit()
    }
  },
  created() {
    this.getData(1)
    this.getModelType()
    this.getSeriesList()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.switchEdit()
    })
  },
  methods: {
    switchEdit() {
      const queryData = this.$route.query
      console.log('queryData', queryData)
      if (queryData && queryData.showEdit && +queryData.showEdit === 2) {
        this.showEdit = 2
        // 链接里取id
        if (queryData.commodityid) {
          this.showEditpage({ commodityid: queryData.commodityid })
        }
      } else {
        this.showEdit = 1
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    showEditpage(data) {
      this.showEdit = 2
      this.addData = data
      this.$router.push(`/commodity/commodity/index?showEdit=2&commodityid=${data.commodityid}`) // 清除query data
    },
    closeEditpage() {
      this.showEdit = 1
    },
    successpage(commodityid) {
      this.addCommodityid = commodityid
      this.showEdit = 3
    },
    detailpage() {
      this.showEdit = 4
    },
    godetail(row, column, event, cell) {
      console.log(column.label)
      if (column.label === '商品标题') {
        // this.showEdit = 4;
      }
    },
    getModelType() {
      getModelType().then(res => {
        this.modeloptions = res.detail.data
      })
    },
    getSeriesList() {
      getSeriesList().then(res => {
        this.serieroptions = res.detail.data
      })
    },
    getData(e) {
      console.log(e)
      commodityIdx({
        title: this.title,
        modeltypeid: this.modeltypeid,
        seriesid: this.seriesid,
        status: this.status,
        page: e
      }).then(res => {
        this.tableData = res.list.list
        this.count = Number(res.list.count)
        this.total = Number(res.list.total)
      })
    },
    opCommodityStatus(status) {
      const self = this
      if(this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请先选择商品'
        })
        return
      }
      const commodityid = []
      self.multipleSelection.forEach(row => {
        commodityid.push(row.commodityid)
      })

      opCommodityStatus({
        commodityid: commodityid.toString(),
        status: status
      }).then(response => {
        self.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.multipleTable.clearSelection()
        self.tableData.forEach(row => {
          commodityid.forEach(id => {
            row.commodityid === id ? row.status = status : row.status
          })
        })
      })
    },
    delCommodity() {
      const self = this
      if(this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请先选择商品'
        })
        return
      }
      this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const commodityid = []
        self.multipleSelection.forEach(row => {
          commodityid.push(row.commodityid)
        })
        delCommodity({
          commodityid: commodityid.toString()
        }).then(response => {
          self.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$refs.multipleTable.clearSelection()
          commodityid.forEach(id => {
            self.tableData = self.tableData.filter(function(row) {
              return row.commodityid !== id
            })
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-row{
	.el-button{
		min-width: 120px;
	}
}

.banner_page{
	position: relative;
	background: #F5F6FA;
}
.total_bar{
		height: 40px;
		line-height: 40px;
	}
	.tab_img{
		width: 20px;
		height: 20px;
	}

</style>

